<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>传智健康</title>
    <meta name="description" content="传智健康">
    <meta name="keywords" content="传智健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="plugins/elementui/index.css">
    <link rel="stylesheet" href="css/login.css">
    <script src="../js/healthmobile.js"></script>
</head>
<body class="hold-transition skin-purple sidebar-mini">
<div id="app">
    <div class="login-container">
        <div class="loginBox">
            <form method="post" class="login-form" action="/register.do" label-position="left">
                <div>
                    <el-input placeholder="请输入用户名" v-model="pagination.username" style="width: 400px;margin-bottom:15px;" class="filter-item"></el-input>
                </div>
                <div>
                    <el-input placeholder="请输入手机号码" v-model="pagination.telephone" style="width: 280px;margin-bottom:15px;margin-right:3px;" class="filter-item"></el-input>
                    <el-button  id="validateCodeButton"  @click="sendValidateCode()"   class="dalfBut">获取验证码</el-button>
                    <!--<input id="validateCodeButton" @click="sendValidateCode()" style="font-size: 12px" value="获取验证码">-->
                </div>
                <div>
                    <el-input placeholder="请输入验证码" v-model="pagination.verification_code" style="width: 400px;margin-bottom:15px;" class="filter-item"></el-input>
                </div>
                <div>
                    <el-input placeholder="请输入新密码" v-model="pagination.password" style="width: 400px;margin-bottom:30px;" class="filter-item"></el-input>
                </div>
                <el-button @click="forgotPassword()" style="width: 400px;margin-bottom:15px;" class="filter-item">找回密码</el-button>

            </form>
        </div>
    </div>
</div>
</body>
<!-- 引入组件库 -->
<script src="js/vue.js"></script>
<script src="plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script><script>

    var vue = new Vue({
        el: '#app',
        data:{
            pagination: {},//表单数据
        },
        //钩子函数，VUE对象初始化完成后自动执行
        created() {

        },
        methods: {
            //发送验证码
            sendValidateCode(){
                var telephone = this.pagination.telephone;
                if (!checkTelephone(telephone)) {
                    this.$message.error('请输入正确的手机号');
                    return false;
                }
                validateCodeButton = $("#validateCodeButton")[0];
                clock = window.setInterval(doLoop, 1000); //一秒执行一次
                axios.post("/myValidateCode/send4ForgotPassword.do?telephone=" + telephone).then((response) => {
                    if(!response.data.flag){
                    //验证码发送失败
                    this.$message.error('验证码发送失败，请检查手机号输入是否正确');
                }
            });
            },


            forgotPassword () {
                ///分页查询
                axios.post('/user/forgotPassword.do',this.pagination).then(res=>{
                    //成功回显数据
                    if(res.data.flag){
                    //提示成功
                    this.$message({
                        message: res.data.message,
                        type: 'success'
                    });
                }
                //失败错误提示
            else
                {
                    this.$message.error(res.data.message);
                }
            })
            }
        }
    })
</script>
</html>
